<template>
  <dw-page-warpper :flex="true">
    <div class="left-warpper">
      <div class="left-content-warpper">
        <div class="title">环境</div>
        <div class="item">
          <el-icon><Rank /></el-icon>
          Mock环境
          <el-icon><More /></el-icon>
        </div>
        <div class="item">
          <el-icon><Rank /></el-icon>
          测试环境
          <el-icon><More /></el-icon>
        </div>
        <div class="item">
          <el-icon><Rank /></el-icon>
          开发环境
          <el-icon><More /></el-icon>
        </div>
        <div class="item active">
          <el-icon><Rank /></el-icon>
          生产环境
          <el-icon><More /></el-icon>
        </div>
      </div>
      <div class="left-button-warpper">
        <el-button type="primary" class="btn">新增环境</el-button>
      </div>
    </div>
    <div class="right-warpper">
      <div class="right-content-warpper">
        <div class="title">编辑环境</div>
        <el-form :model="form" label-width="auto">
          <el-row>
            <el-col>
              <el-form-item label="环境名称">
                <el-input v-model="form.environmentName" style="width: calc(100% - 258px)" :clearable="true" />
                <el-select v-model="form.environmentType" style="width: 250px; margin-left: 8px">
                  <el-option v-for="item in environmentTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex; justify-content: space-between; align-items: center; vertical-align: middle">
          <div style="font-size: 15px">服务(前缀URL)</div>
          <el-button type="primary">新增服务</el-button>
        </div>
        <el-table :data="tableData" border class="table">
          <el-table-column type="index" width="40" />
          <el-table-column prop="environmentServerName" label="服务名称" width="220">
            <template #default="{ row }">
              <el-input v-model="row.environmentServerName" :clearable="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="preUrl" label="服务前缀">
            <template #default="{ row }">
              <el-input v-model="row.urlPrefix" :clearable="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作" align="center" width="60">
            <template #default="{ row }">
              <el-icon class="del" @click="onDelete(row)"><Delete /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right-button-warpper">
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
defineOptions({
  name: 'SysEnvironment',
});
const form = ref({
  environmentName: '',
  environmentType: 1,
});
const environmentTypeList = [
  {
    value: 1,
    label: '开发环境',
  },
  {
    value: 2,
    label: '测试环境',
  },
  {
    value: 3,
    label: 'Mock环境',
  },
  {
    value: 4,
    label: '生成环境',
  },
  {
    value: 5,
    label: '其他环境',
  },
];
const tableData = [
  {
    environmentServerName: '门诊预约',
    urlPrefix: 'http://192.168.3.5:8081/outpatient-res/',
  },
  {
    environmentServerName: '收费系统',
    urlPrefix: 'http://192.168.3.5:8081/outpatient-res/',
  },
  {
    environmentServerName: '集成平台',
    urlPrefix: 'http://192.168.4.135:8082/',
  },
];
interface IEnvironmentServer {
  environmentServerName: string;
  urlPrefix: string;
}
const onDelete = (row: IEnvironmentServer) => {
  console.log(row);
};
</script>
<style lang="scss" scoped>
.left-warpper {
  width: 220px;
  height: 100%;
  background-color: #e9f6fd;
  box-shadow: 5px;
}
.left-content-warpper {
  padding: 5px 10px;
  height: calc(100% - 80px);
  .title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
  }
  .item {
    width: calc(100% - 16px);
    height: 38px;
    line-height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #cde2ee;
    border-radius: 5px;
    padding: 0 8px;
    cursor: pointer;
    margin: 5px 0;
  }

  .item:hover {
    background-color: #b4daf0;
  }

  .item.active {
    background-color: #2b528a;
    color: #fff;
  }
}
.left-button-warpper {
  height: 50xp;
  text-align: center;
  .btn {
    background-color: #007eff;
    width: 180px;
  }
}

.right-warpper {
  width: calc(100% - 220px);
  height: 100%;
  background-color: #fff;
  box-shadow: 5px #fff;
}
.right-content-warpper {
  padding: 5px 20px;
  height: calc(100% - 50px);
  background-color: #fff;
  box-shadow: 5px #fff;
  .title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
  }
}
.right-button-warpper {
  width: calc(100% - 20px);
  height: 50px;
  display: flex;
  justify-content: right;
}
.del {
  color: #f53f3f;
  font-weight: 16px;
}

.table {
  width: 100%;
  height: calc(100% - 160px);
  margin-top: 20px;
  :deep(tbody .cell) {
    padding: 0;
  }
  :deep(tbody .el-table__cell) {
    text-align: center;
    padding: 0;
  }
  /* 输入框的样式 */
  :deep(.el-input__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 选择框的样式 */
  :deep(.el-select__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 鼠标悬停时的样式 */
  :deep(.el-input__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary); /* 鼠标悬停时下边框高亮 */
  }
  :deep(.el-select__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary) !important; /* 鼠标悬停时下边框高亮 */
  }
  /* 聚焦时的样式 */
  :deep(.el-input__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
  :deep(.el-select__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
}
</style>
